<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
</head>
<body>
    <ul id="pageHeader">
        <li id="tab1">首页</li>
        <li id="tab2">页签1</li>
        <li id="tab3">页签2</li>
        <li id="tab4">页签3</li>
        <li id="tab5">页签4</li>
    </ul>
    <script type="text/javascript">
        /*
            子元素触发的事件可以通过冒泡传给父元素，用此特性可以将事件绑定在父元素的身上从而实现事件委托。
            事件的回调函数默认传入事件对象，通过事件对象可以拿到触发事件的究竟是哪个子元素（`event.target`）
        */
        let header = document.querySelector('#pageHeader')
        header.addEventListener('click', (event) => {
            console.log(event)
        })
    </script>
</body>
</html>